<template>
  <div class="quota_template">
    <!-- <el-button @click="test">刷新</el-button> -->
    <!-- 文件 -->
    <div class="file">
      <draggable2
        ref="draggable2Ref"
        :title="'定额模板管理'"
        :saveLocalStore="saveLocalStore"
        @clickItem="handelAddEngTypeList"
      ></draggable2>
    </div>
    <!-- 工程文件的列表 -->
    <div class="content">
      <div class="sp_list">
        <draggableEngTypeList
          ref="listRef"
          :currNode="currNode"
          :list="data.engTypeList"
          :item="data.choseItem"
          :saveLocalStore="saveLocalStore"
          @addEngTypeList="handelAddEngTypeLists"
          @getTableList="handelGetTableList"
          @serch="handelSerch"
        ></draggableEngTypeList>
      </div>
      <!-- 新增定额 -->
      <div class="de_tabel">
        <quotaTable
          :currNode="currNode"
          :list="data.quotaTableList"
          :projectId="data.projectId"
          :saveLocalStore="saveLocalStore"
        ></quotaTable>
      </div>
    </div>
  </div>
</template>
<script setup>
// 资源导入
import { reactive, ref } from "vue";
import draggable2 from "../components/draggable2.vue";
import draggableEngTypeList from "../components/draggableEngTypeList.vue";
import quotaTable from "../components/quotaTable.vue";
// api
import { getProject, quotaTemplateListOld } from "@/apis/createFile/index.js";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
// 变量定义
const data = reactive({ engTypeList: [], choseItem: {}, quotaTableList: [], projectId: "" });
const draggable2Ref = ref();
const listRef = ref();
const currNode = ref({});

// 方法定义

const test = () => {
  router.go(0);
};
const saveLocalStore = () => {
  console.log("aaaaaaaaaaaaa", draggable2Ref.value?.currNode);
  currNode.value = draggable2Ref.value?.currNode;
  const quotaAtore = JSON.parse(localStorage.getItem("quota"));
  localStorage.setItem(
    "quota",
    JSON.stringify({
      folderId1: draggable2Ref.value?.currNode?.folderId || quotaAtore?.folderId1,
      folderId2: listRef.value.currObj?.projectId || quotaAtore?.folderId2
    })
  );
};

const handelAddEngTypeList = async item => {
  // console.log("111111111111111111111111111", item, "点击子文件获取的列表");
  data.choseItem = item; // 暂存点击的定额模板的子文件项
  await getProject(item.folderId, "")
    .then(res => {
      res.data.map(it => {
        it.isStatus = it.status == 0 ? false : true;
      });
      data.engTypeList = [];
      data.engTypeList = res.data;
      // 判断工程文件是否有数据，如果有则执行一下点击的事件，反之 否
      if (res.data.length > 0) {
        // handelGetTableList(res.data[0]);
      } else {
        // 如果工程文件没有则清空定额表格
        data.quotaTableList = [];
      }
    })
    .catch(() => {
      data.engTypeList = [];
    });
};
const handelSerch = v => {
  console.log(v, "搜索的字符");
  let projectName = v;
  getProject(data.choseItem.folderId, projectName).then(res => {
    res.data.map(it => {
      it.isStatus = it.status == 0 ? false : true;
    });
    data.engTypeList = res.data;
  });
};
const handelAddEngTypeLists = async (item, projectId) => {
  // console.log(item, "点击的定额模板列表****", "color:green");
  await handelAddEngTypeList(data.choseItem);

  if (projectId) {
    //新增
    const obj = data.engTypeList.find(_item => _item.projectId === projectId);
    const index = data.engTypeList.findIndex(_item => _item.projectId === projectId);
    console.log("新增的工程对象===", obj, index);
    listRef.value.handelClickFirstFile(obj, index);
  }
};
// 获取定额表格数据
const handelGetTableList = item => {
  data.projectId = item?.projectId;
  if (!data.projectId) return;
  quotaTemplateListOld(item?.projectId)
    .then(res => {
      if (res.code == 200) {
        res.data.map(it => {
          if (it.unit !== null) {
            console.log("1111");
            it.unit = it.unit.toString();
          } else {
            // it.unit = it.unit.toString();
          }
          it.isStatus = it.quotaState == 0 ? false : true;
        });
        data.quotaTableList = [];
        data.quotaTableList = res.data;
      }
    })
    .catch(err => {
      data.quotaTableList = [];
      console.log(err, "错误");
    });
};
// 生命周期
// 监听
</script>
<style scoped lang="scss">
:deep(.file .draggable_content) {
  width: 200px !important;
  box-sizing: border-box;
}
.quota_template {
  background-color: #e3f0fe;
  height: calc(100vh - 134px);
  display: flex;
  flex-direction: row;
  .file {
    // flex: 1;
  }
  .content {
    // flex: 2;
    background-color: rgb(255, 255, 255);
    margin-left: 20px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    display: flex;
    .sp_list {
      height: 100%;
    }
    .de_tabel {
      height: 100%;
      padding: 0 20px 20px 20px;
      overflow: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      width: 100%;
    }
  }
}
</style>
